<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:a="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:ctg="http://www.crotouristguide.com/taglib"
	xmlns:jawr="https://jawr.dev.java.net/jsf/facelets">
<head>
    <title>#{title1}</title>
    <jawr:style src="/resources/all.css"/>
    <script src="http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js?bundle=true" type="text/javascript"></script>
  
</head>
<body id="dogadjaji" onload="onLoad();">
<f:view>
<script type="text/javascript">
function onLoad() {
	  var eventSource = new Timeline.DefaultEventSource();
	  var bandInfos = [
	    Timeline.createHotZoneBandInfo({
	        zones: [
	            {   start:    "#{dogadjajAction.getWeekStartDate()} GMT-0500",
	                end:      "#{dogadjajAction.getWeekEndDate()} GMT-0500",
	                magnify:  10,
	                unit:     Timeline.DateTime.WEEK
	            },
	            {   start:    "#{dogadjajAction.getDayStartDate()} GMT-0500",
	                end:      "#{dogadjajAction.getDayEndDate()} GMT-0500",
	                magnify:  7,
	                unit:     Timeline.DateTime.DAY
	            }/*,
	            {   start:    "Aug 02 2006 06:00:00 GMT-0500",
	                end:      "Aug 02 2006 12:00:00 GMT-0500",
	                magnify:  5,
	                unit:     Timeline.DateTime.HOUR
	            }*/
	        ],
	        timeZone:       -5,
	        eventSource:    eventSource,
	        date:           "#{dogadjajAction.getToday()} GMT",
	        width:          "70%", 
	        intervalUnit:   Timeline.DateTime.MONTH, 
	        intervalPixels: 100
	    }),
	    Timeline.createHotZoneBandInfo({
	        zones: [
	            {   start:    "#{dogadjajAction.getWeekStartDate()} GMT-0500",
	                end:      "#{dogadjajAction.getWeekEndDate()} GMT-0500",
	                magnify:  20,
	                unit:     Timeline.DateTime.WEEK
	            }
	        ],
	        timeZone:       -5,
	        eventSource:    eventSource,
	        date:           "#{dogadjajAction.getToday()} GMT",
	        width:          "30%", 
	        intervalUnit:   Timeline.DateTime.YEAR, 
	        intervalPixels: 200,
	        showEventText:  false,
	        trackHeight:    0.5,
	        trackGap:       0.2
	    })
	  ];
	  bandInfos[1].syncWith = 0;
	  bandInfos[1].highlight = true;
	  //bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
	  
	  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
	  Timeline.loadXML("#{application.contextPath}/seam/resource/dogadjaj?idMjesta=#{param.idMjesta}&amp;idOtoka=#{param.idotoka}&amp;idZupanije=#{param.idZupanije}&amp;lang=#{currentLang}", function(xml, url) { eventSource.loadXML(xml, url); });
	}

	var resizeTimerID = null;
	function onResize() {
	    if (resizeTimerID == null) {
	        resizeTimerID = window.setTimeout(function() {
	            resizeTimerID = null;
	            tl.layout();
	        }, 500);
	    }
	}
</script>

<div id="my-timeline" style="height: 640px;"></div>
</f:view>
</body>
</html>